<template>
  <div class="navbar">
    <div class="navbar-container">
      <!-- logo -->
      <span class="logo" @click="handleToHome">Blog</span>
      <!-- 导航按钮 -->
      <div class="menu-wrapper">
        <el-menu ref="menuEl" :default-active="activeIndex" class="el-menu-demo" router mode="horizontal">
          <el-menu-item index="/home">首页</el-menu-item>
          <!-- <el-menu-item index="/1">前端</el-menu-item> -->
          <!-- <el-menu-item index="/2">后端</el-menu-item> -->
          <!-- <el-menu-item index="/3">学习路线</el-menu-item> -->
          <!-- <el-menu-item index="/4">动态</el-menu-item> -->
          <el-menu-item index="/user/article-list/publish">我的文章</el-menu-item>
        </el-menu>
      </div>
      <div class="user-wrapper">
        <el-button circle>
          <el-icon @click="handleChat">
            <Bell />
          </el-icon>
        </el-button>
        <!-- 发布文章按钮 -->
        <el-button ref="newArticleBtnEl" @click="handleNewArticle" class="new-article-btn" type="primary" round>发布文章
        </el-button>
        <!-- 用户头像 -->
        <el-dropdown>
          <!-- @click="handleClickAvatar"  -->
          <el-avatar class="avatar" :size="42" :src="avatarUrl" />
          <!-- 下拉框 -->
          <template #dropdown>
            <el-dropdown-menu v-show="hasLogin">
              <div class="user-info">
                <div class="nickname">{{ nickname }}</div>
              </div>
              <el-dropdown-item @click="handleRouteTo('/user')">
                <span class="item-text">个人主页</span>
              </el-dropdown-item>
              <el-dropdown-item @click="handleRouteTo('/user/editor')">
                <span class="item-text">编辑资料</span>
              </el-dropdown-item>
              <el-dropdown-item @click="handleRouteTo('/user/article-list/publish')">
                <span class="item-text">我的文章</span>
              </el-dropdown-item>
              <el-dropdown-item @click="handleLogout">
                <span class="item-text logout-btn">退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getToken, removeToken } from '@/utils/auth'
import { ElMessage } from 'element-plus'
import api from '@/api'
import { Bell } from '@element-plus/icons-vue'
export default {
  data() {
    return {
      activeIndex: "/home"
    }
  },
  components: {
    Bell
  },
  computed: {
    ...mapState({
      nickname: state => state.user.nickname,
      avatarUrl: state => state.user.avatarUrl
    }),
    hasLogin() {
      return getToken() ? true : false
    }
  },
  methods: {
    // 首页按钮-点击事件
    handleToHome() {
      this.activeIndex = '/home'
      this.$router.push('/home')
    },
    // 聊天界面-点击事件
    handleChat() {
      this.$router.push('/chat')
    },
    // 发布按钮-点击事件
    handleNewArticle(event) {
      // 失去焦点
      event.target.blur()
      if (event.target.nodeName === 'SPAN') {
        event.target.parentNode.blur()
      }
      api.article.add({ title: '无标题' }).then(result => {
        const newArticle = result.data.newArticle
        this.$router.push({ name: 'article-editor', params: { id: newArticle._id } })
      })
    },
    // handleClickAvatar() {
    //   const hasLogin = getToken()
    //   if (hasLogin) {
    //     this.$router.push('/user')
    //   } else {
    //     // 未登录则跳转到登录页
    //     this.$router.push('/login')
    //   }
    // },

    // 退出登录按钮-点击事件
    handleLogout() {
      removeToken()
      ElMessage.success("退出成功")
      this.$router.replace('/login')
    },
    handleRouteTo(path) {
      this.activeIndex = path + Date.now()
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 70px;
  border-bottom: 1px solid #EDEBE9;
  // background-color : #EFF6FC;

  .navbar-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;

    .logo {
      cursor: pointer;
      display: inline-block;
      line-height: 70px;
      margin-right: 18px;
      font-size: 16pt;
      font-weight: bold;
    }

    .menu-wrapper {
      flex: 1;

      .el-menu {
        height: 100%;
        border-bottom: none;
        background-color: transparent;
      }
    }

    .user-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;

      .new-article-btn {
        font-size: 11pt;
        margin-right: 16px;
      }

      .avatar {
        cursor: pointer;
      }
    }
  }
}
</style>

<style lang="scss">
.el-dropdown-menu {
  .logout-btn {
    color: var(--el-color-danger);
  }

  .user-info {
    width: 120px;
    padding: 12px 0;
    border-bottom: 1px solid var(--el-border-color);

    .nickname {
      font-size: 12pt;
      text-align: center;
      color: var(--el-text-color-secondary);
    }
  }

  .item-text {
    display: inline-block;
    width: 100%;
    text-align: center;
  }
}
</style>